<template>
 <kb-layout>
	<kb-skeleton-index :loading="loading">	
	<view  class="slidebox noalarm" >
		<!-- 视频图片和户型图轮播 -->
	 <kb-group-swipe  
	 :faceimages="village?.slides"></kb-group-swipe>
	  <!-- 圆角背景 -->
		 <cover-view class="coverbg abmt30"> </cover-view>
		 
		 <view  class="topbg abmt30 ">
			<view class="topbg__a"></view>
		 </view>
	 <!-- 圆角背景 -->
	</view> 
	<view class="show">
		<VillageItem :house="village"></VillageItem>
		
	</view>
	
	<view class="realhouse" v-if="real_total>0">
		 <view class="section-title">
			<u-text text="小区房源" size="20" :bold="true"></u-text>
		  </view>
		<view class="show" >
			<view class="ul-li" v-for="(item, index) in realhouse" :key="index">
			 <kb-sechouse-item 
			:zhutype="zhutype" 
			:house="item"></kb-sechouse-item>			
			</view>
			
			
		 <navigator :url="'/pages/house/house?keyword='+village?.name">
			<view class="findmore"> 同小区{{real_total}}条房源</view>
		 </navigator> 
			
		</view>		
		
	</view>
	
	
	<view class="mapbox" v-if="village?.longitude">
			<view class="section-title">
				<u-text text="周边配套" size="20" :bold="true"></u-text>
			 </view>
			 <view style="padding: 10rpx 30rpx; background-color: #fff;">
		<map id="map" :enable-pio="true" scale="14"
		style="width:100%; height: 180px;"
		:markers="markers"
		:longitude="village?.longitude"
		:latitude="village?.latitude" 
		:show-location="true" 
		></map>	
		</view>
		<!-- 切换显示周边配套 -->
	<view class="zbbox">
		 <u-tabs  :list="zbtype"
		  itemStyle="width:24.5%; height:44px"
		  @click="onZbclick"></u-tabs>
		  
		  <view class="zblist">
			  
			 <view v-for="(item,index ) in zhoubian" :key="index" class="zblist__item">
			  <view class="u-line-1">
				 <u-text prefixIcon="map" size="13" :lines="1" :text="item.title"></u-text> 
			  </view>
			  <view><u-text color="#999"  size="12" :lines="1" :text="'直线'+item._distance+'米'"></u-text></view>
			</view>
			<!--zblist__item 一条信息end -->
			 
		  </view>
		 </view>
	 </view> 
	
	<!-- 联系经纪人	 -->
	<kb-broker-bar :house="village"></kb-broker-bar>
		
	<kb-footer :color="ee.primayColor" ></kb-footer>
		
	</kb-skeleton-index>
		
 </kb-layout>
</template>

<script>
	import util from "/common/tools/utils.js";
	import VillageItem from "./compents/village.vue"
	export default {
		components:{
			VillageItem
		},
		data() {
			return {
				village_id: 0,
				village: {},
				loading: true,
				markers:[],
				zbtype:[
					{name:'交通'},
					{name:'教育'},
					{name:'医疗'},
					{name:'购物'},
					{name:'休闲'},
				],
				loading: true,
				zhoubian:[],
				realhouse:[],
				real_total:0,
				zhutype :0,
			}
		},
		watch:{
			loading(n){
				if(this.village.mapdata)
				this.zhoubian = this.village.mapdata[ '交通']
			}
		},
		methods: {
			//切换周边配套的tabs
			onZbclick(e){
				if(this.village.mapdata)
				this.zhoubian = this.village.mapdata[ e.name ]				 
			},
			getRealhouse(){
				util.getModuleData("showhouse/realhouse",{village_id: this.village_id, zhutype: this.zhutype})
				.then(ret=>{
					this.realhouse = ret.list;
					this.real_total = ret.total;
				})
			}
		},
		onLoad(option) {
			this.village_id = option.id || 42;
			this.zhutype = option.zhutype || 0;
			util.getModuleData("village/index",{id: this.village_id})
			.then(ret=>{ 
				this.loading = false;
				this.village = ret;
				uni.setNavigationBarTitle({
					title:  ret.name + '小区详情'  
				})	
				return ret.id;
			}).then(r =>{
				this.getRealhouse()
			});
		}
	}
</script>
<style lang="scss">
@import "show.scss";

</style>
